<template>
  <div class="NewAboutUs">
    <div class="btnreturn">
      <a @click="returnl()">
        <!-- <img src="../../../static/img/return1.png" alt="" style="width:35px;heigth:10px;"> -->
        <i class="icon iconfont icon-houtui" style="font-size:35px;color:#55ADEB;"></i>
      </a>
    </div>
    <div class="top-box">
      <i class="title-icon"></i>
      <span>{{$t('route.AboutUs')}}</span>
      <i class="title-icon"></i>
    </div>
    <el-row :gutter="20" style="margin:0;">
      <el-col :span="8" style="padding-left:0;">
        <el-card class="column">
          <div class="columnImg">
            <!--<img src="./images/about-us-WhoWeAre.png">-->
            <img src="./images/new3.png">
          </div>
          <div class="info">
            <div class="title">{{$t('aboutus1.partCont1.title')}}</div>
            <div class="cont">{{$t('aboutus1.partCont1.cont')}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="column">
          <div class="columnImg">
            <!--<img src="./images/about-us-WhatWeDo.png">-->
            <img src="./images/new1.png">
          </div>
          <div class="info">
            <div class="title">{{$t('aboutus1.partCont2.title')}}</div>
            <div class="cont">{{$t('aboutus1.partCont2.cont')}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding-right:0;">
        <el-card class="column">
          <div class="columnImg">
            <!--<img src="./images/about-us-OurVision.png">-->
            <img src="./images/new2.png">
          </div>
          <div class="info">
            <div class="title">{{$t('aboutus1.partCont3.title')}}</div>
            <div class="cont">{{$t('aboutus1.partCont3.cont')}}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="bottom-box">
      <el-row>
        <el-col :span="12">
          <div class="partBox">
            <div class="title" style="text-align: left; margin-left: 5px;">{{$t('aboutus1.partCont4.title')}}</div>
            <!--<div class="cont">-->
            <!--<p v-for="item in $t('aboutus1.partCont4.items')" class="contList">-->
            <!--<i class="list-icon"></i><span class="list-message">{{item.message}}</span>-->
            <!--</p>-->
            <!--<p class="moreCont">{{$t('aboutus1.partCont4.more')}}</p>-->
            <!--</div>-->
            <ul style="margin-left:-15px;">
              <li v-for="item in $t('aboutus1.partCont4.items')" class="contList">
                <span>{{item.message}}</span>
              </li>
            </ul>
            <p class="moreCont">{{$t('aboutus1.partCont4.more')}}</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="columnImg">
            <!--<img src="./images/about-us-OurFeature.png">-->
            <img src="./images/new4.png">
          </div>
        </el-col>
      </el-row>


    </el-card>
  </div>
</template>

<script>
    export default {
      name: "NewAboutUs",
      methods: {
        //回退
        returnl() {
          this.$router.push('/login')
        }
      }
    }
</script>

<style lang="scss" scoped>
  .NewAboutUs{
    padding: 20px 46px;
    .btnreturn {
      position: fixed;
      right: 20px;
      top: 12px;
      z-index: 99;
    }
    .title{
      font-weight:bold;
      font-size:20px;
      color:#333;
      text-align: center;
    }
    .cont{
      font-size:12px;
      color:#666;
      line-height:24px;
      margin-top:20px;
    }
    .info{
      margin-top:20px;
    }
    .column{
      min-height:460px;
      overflow:hidden;
      .columnImg{
        text-align:center;
      }
    }
    .bottom-box{
      margin-top:20px;
      .columnImg{
        /*margin-right:18px;*/
        vertical-align: top;
        display:inline-block;
        float: right;
      }
      .partBox{
        margin-top: 20px;
        display:inline-block;
        font-size:12px;
        color:#666;
        /*.cont{*/
        /*.contList{*/
        /*line-height:18px;*/
        /*.list-icon{*/
        /*display:inline-block;*/
        /*width:6px;*/
        /*height:6px;*/
        /*background: #4f545a;*/
        /*border-radius: 50%;*/
        /*margin-right:10px;*/
        /*}*/
        /*}*/
        /*.moreCont{*/
        /*margin-left: 18px;*/
        /*}*/
        /*}*/
        .contList {
          font-size:18px;
          color:#4f545a;
          span{
            line-height:26px;
            font-size:12px;
            color:#666;
          }
        }
        .moreCont{
          margin-left: 24px;
        }
      }
      @media screen and (max-width:1366px) {
        .partBox{
          width:489px;
        }
      }
    }
    .top-box{
      text-align: center;
      padding-top: 10px;
      padding-bottom: 30px;
      .title-icon{
        display:inline-block;
        vertical-align: text-top;
        width: 50px;
        height: 4px;
        background-color: #0090e9;
      }
      .title-icon + span{
        margin: 0 10px;
        font-weight:bold;
        font-size:30px;
        color: #000;
      }
    }
  }

</style>
